window.addEventListener('load', function(){
    //1. 获取元素
	var focus = document.querySelector('.focus');
	var focusWidth = focus.offsetWidth;
	//console.log(focusWidth);
	var arrow_l = document.querySelector('.arrow-l');
	var arrow_r = document.querySelector('.arrow-r');
	//2. 鼠标经过轮播图显示按钮
	focus.addEventListener('mouseover', function(){
		arrow_l.style.display = 'block';
		arrow_r.style.display = 'block';
		clearInterval(timer);
		timer = null //清除定时器变量
	});
	focus.addEventListener('mouseout', function(){
		arrow_l.style.display = 'none';
		arrow_r.style.display = 'none';
		//鼠标离开在重新开启定时器
		timer = setInterval(function() {
			//手动调用点击事件
			arrow_r.click();
		},2000);
	});
	
	//3. 动态生成小圆圈
	var ul = focus.querySelector('ul');
	var ol = document.querySelector('.circle');
	for(var i = 0; i < ul.children.length; i++) {
		//创建li
		var li = document.createElement('li');
		//记录挡圈小圆圈的索引号，通过自定义属性
		li.setAttribute('index', i);
		ol.appendChild(li);
		
	 //4. 生成小li的同时设置小圆圈的排他思想
	    li.addEventListener('click', function(){
			//干掉所有人，留下我自己
			for(var i = 0; i < ol.children.length; i++) {
				ol.children[i].className = '';
			}
			this.className = 'current';
			
			//5.点击小圆圈移动图片，移动的是ul
			//ul移动的距离就是小圆圈的索引号 * 图片的宽度，注意是负值
			//当点击某个小li，就会得到当前小li的索引号
			var index = this.getAttribute('index');
			//当点击了某个小li，就将这个li的索引号给num
			num = index;
			//当点击了某个小li，就将这个li的索引号给cicle
			cicle = index;
			//console.log(index);
			animate(ul, -index * focusWidth);
		});
	}
	//将ol中第一个li设置成底色为白色
	ol.children[0].className = 'current';
	
	//6. 克隆第一种图片，放到ul的最后
	var first = ul.children[0].cloneNode(true);//加true深克隆，不加浅克隆
	ul.appendChild(first);
	
	//7. 点击右侧按钮就换下一张图片
	var num = 0;
	//cicle是控制小圆圈变化的变量，图片每替换一张就加1
	var cicle = 0;
	//flag设置节流阀,播放完一张才播放下一张,主要控制点击右键图片过快的问题，
	var flag = true;
	arrow_r.addEventListener('click',function() {
		if(flag == true) {
			flag = false; //关闭节流阀
			//如果走到了最后一张复制的图片，要复原图片位置，也就是left = 0
			if(num == ul.children.length - 1){
				ul.style.left = 0;
				num = 0;
			}
			num++;
			animate(ul, -num * focusWidth, function() {
				flag = true; //一张图片执行完之后在开启节流阀
			});
			//8，点击小圆圈，小圆圈跟随一起变化，可以申明一个变量cicle控制圆圈变化
			cicle++;
			//如果cicle走到了克隆的节点，就复原
			if(cicle == ol.children.length) {
				cicle = 0;
			}
			//调用函数
			cicleChange();
		}
	});
	
	//9, 左侧按钮的做法
	arrow_l.addEventListener('click',function() {
		if(flag == true) {
			flag = false; //关闭节流阀
			//如果走到了最后一张复制的图片，要复原图片位置，也就是left = 0
			if(num == 0){
				num = ul.children.length - 1;
				ul.style.left = -num * focusWidth + 'px';
			}
			num--;
			animate(ul, -num * focusWidth, function() {
				flag = true; //重新开启节流阀
			});
			cicle--;
			/* 如果cicle < 0是第一张图片，则小圆圈要走到最后一个
			if(cicle < 0) {
				cicle = ol.children.length - 1;
			} */
			cicle = cicle < 0 ? ol.children.length - 1 : cicle;
			//调用函数
			cicleChange()
		}
	});
	function cicleChange() {
		//先清除其余小圆圈的current类名
		for(var i = 0; i < ol.children.length; i++) {
			ol.children[i].className = '';
		}
		//留下当前的小圆圈current类名
		ol.children[cicle].className = 'current';
	}
	
	//10. 自动播放轮播图
	var timer = setInterval(function() {
		//手动调用点击事件
		arrow_r.click();
	},2000);
});